<!DOCTYPE html>
<html>
<head>
    <title>ManaGement PlatForm</title>
    <!--    <#include  "/home.html">-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta name="_csrf" content="2a049f84-561c-44bf-ae25-f24fbf78b313">
    <meta name="_csrf_header" content="X-CSRF-TOKEN">
    <script src="/wedding_admin/js/common.js"></script>
    <script src="/wedding_admin/js/jquery.min.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.all.min.js"></script>
    <script src="/wedding_admin/js/jszip.min.js"></script>
    <script src="/wedding_admin/js/um/respond.min.js"></script>
    <script src="/wedding_admin/js/um/es5-shim.min.js"></script>

    <script src="/wedding_admin/js/kendo/kendo.culture.zh-CN.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.messages.zh-CN.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.hap.js?v=20180330"></script>
    <script src="/wedding_admin/js/um/moment.min.js"></script>
    <script src="/wedding_admin/js/um/daterangepicker.js"></script>
    <script src="/wedding_admin/js/layui/lay/dest/layui.all.js"></script>

    <script src="/wedding_admin/js/vue_table/vue.min.js"></script>
    <script src="/wedding_admin/js/vue_table/vue-validator.min.js"></script>

    <script src="/wedding_admin/js/treegrid/tree.table.js"></script>
    <script src="/wedding_admin/js/treegrid/jquery.treegrid.extension.js"></script>
    <script src="/wedding_admin/js/treegrid/jquery.treegrid.min.js"></script>
    <script src="/wedding_admin/js/ztree/jquery.ztree.all.min.js"></script>

    <link href="/wedding_admin/statics/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="/wedding_admin/statics/css/simple-line-icons.min.css" rel="stylesheet" type="text/css">
    <link href="/wedding_admin/css/ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.common-bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.hap.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/daterangepicker.css" rel="stylesheet">


</head>


<style>
    .form-group > .col-sm-4 {
        padding: 0;
    }

    .more-condition-search {
        float: right;
        cursor: pointer;
        color: #1D92AF;
    }

    .more-condition-search .fa {
        margin-left: 5px;
    }

    .panel-body {
        padding-bottom: 5px;
    }
    td{
        word-break: break-all
    }
</style>
<body>


<div id="page-content">


    <div id="rrapp" v-cloak>
        <div class="pull-left" id="query-reset" style="padding-bottom:10px;">


            <a id="queryInfo" class="btn btn-success" style="float:left;margin-right:5px;"

               @click="add"><i class="fa fa-plus-square" style="margin-right:3px;"></i>添加</a>


            <a id="updateInfo" class="btn btn-primary" style="float:left;margin-right:5px;"

               @click="update"><i class="fa fa-plus-square" style="margin-right:3px;"></i>编辑</a>

            <a id="deteleInfo" class="btn btn-danger" style="float:left;margin-right:5px;"

               @click="del"><i class="fa fa-plus-square" style="margin-right:3px;"></i>删除</a>

        </div>

        <table id="menuTable" data-mobile-responsive="true" data-click-to-select="true">
            <thead>
            <tr>
                <th data-field="selectItem" data-checkbox="true"></th>
            </tr>
            </thead>
        </table>

        <div v-show="!showList" class="panel panel-default">
            <div class="panel-heading">{{title}}</div>
            <form class="form-horizontal">
                <div class="form-group">
                    <div class="col-sm-2 control-label">类型</div>
                    <label class="radio-inline">
                        <input type="radio" name="type" value="0" v-model="menu.type"/> 目录
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="type" value="1" v-model="menu.type"/> 菜单
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="type" value="2" v-model="menu.type"/> 按钮
                    </label>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">菜单名称</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" v-model="menu.name" placeholder="菜单名称或按钮名称"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">上级菜单</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" style="cursor:pointer;"
                               v-model="menu.parentName" @click="menuTree" readonly="readonly"
                               placeholder="一级菜单"/>
                    </div>
                </div>
                <div v-if="menu.type == 1" class="form-group">
                    <div class="col-sm-2 control-label">菜单URL</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" v-model="menu.url" placeholder="菜单URL"/>
                    </div>
                </div>
                <div v-if="menu.type == 1 || menu.type == 2" class="form-group">
                    <div class="col-sm-2 control-label">授权标识</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" v-model="menu.perms"
                               placeholder="多个用逗号分隔，如：user:list,user:create"/>
                    </div>
                </div>
                <div v-if="menu.type != 2" class="form-group">
                    <div class="col-sm-2 control-label">排序号</div>
                    <div class="col-sm-10">
                        <input type="number" class="form-control" v-model="menu.orderNum" placeholder="排序号"/>
                    </div>
                </div>
                <div v-if="menu.type != 2" class="form-group">
                    <div class="col-sm-2 control-label">图标</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" v-model="menu.icon" placeholder="菜单图标"/>
                        <code style="margin-top:4px;display: block;">获取图标：http://www.fontawesome.com.cn/faicons/</code>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label"></div>
                    <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
                    &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 选择菜单 -->
<div id="menuLayer" style="display: none;padding:10px;">
    <ul id="menuTree" class="ztree"></ul>
</div>


</div>

<script>
    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "menuId",
                pIdKey: "parentId",
                rootPId: -1
            },
            key: {
                url: "nourl"
            },
            menuList: {}
        }
    };
    var ztree;

    var vm = new Vue({
        el: '#rrapp',
        data: {
            showList: true,
            title: null,
            menu: {
                parentName: null,
                parentId: 0,
                type: 1,
                orderNum: 0
            }
        },
        methods: {
            getMenu: function (menuId) {
                debugger;

                $.ajax({
                    type: "POST",
                    url: "/wedding_admin/sys/sysmenu/select",
                    contentType: "application/json",
                    success: function (r) {
                        console.log("999")
                        console.log(JSON.stringify(vm.menu.parentId))
                        ztree = $.fn.zTree.init($("#menuTree"), setting, r.menuList);
                        var node = ztree.getNodeByParam("menuId", vm.menu.parentId);
                        ztree.selectNode(node);

                        vm.menu.parentName = node.name;
                    }
                });

            },
            add: function () {
                vm.showList = false;
                vm.title = "新增";
                vm.menu = {parentName: null, parentId: 0, type: 1, orderNum: 0};
                vm.getMenu();
            },
            update: function () {
                var menuId = getMenuId();
                if (menuId == null) {
                    return;
                }

                $.get("/wedding_admin/sys/sysmenu/info/" + menuId, function (r) {
                    vm.showList = false;
                    vm.title = "修改";
                    vm.menu = r.menu;
                    vm.getMenu();
                });


            },
            del: function () {
                var menuId = getMenuId();
                if (menuId == null) {
                    return;
                }


                var rs = confirm('确定要删除选中的记录？');
                if (rs) {

                    $.ajax({
                        type: "POST",
                        url: "/wedding_admin/sys/sysmenu/delete",
                        data: "menuIds=" + menuId,
                        success: function (r) {
                            if (r.code === 0) {
                                alert('操作成功');
                                vm.reload();

                            } else {
                                alert(r.msg);
                            }
                        }
                    });

                }
            },
            saveOrUpdate: function () {
                if (vm.validator()) {
                    return;
                }

                var url = vm.menu.menuId == null ? "/wedding_admin/sys/sysmenu/save" : "/wedding_admin/sys/sysmenu/update";
                $.ajax({
                    type: "POST",
                    url: url,
                    contentType: "application/json",
                    data: JSON.stringify(vm.menu),
                    success: function (r) {
                        if (r.code === 0) {
                            alert('操作成功');
                            vm.reload();
                            jQuery("#menuLayer").hide();//隐藏

                        } else {
                            alert(r.msg);
                        }
                    }
                });
            },
            menuTree: function () {

                layer.open({
                    type: 1,
                    offset: '50px',
                    skin: 'layui-layer-molv',
                    title: "选择菜单",
                    area: ['300px', '450px'],
                    shade: 0,
                    shadeClose: false,
                    content: jQuery("#menuLayer"),
                    btn: ['确定', '取消'],
                    btn1: function (index) {
                        var node = ztree.getSelectedNodes();
                        //选择上级菜单
                        vm.menu.parentId = node[0].menuId;
                        vm.menu.parentName = node[0].name;

                        layer.close(index);
                    }, btn2: function (index) {
                        jQuery("#menuLayer").hide();//隐藏
                    },
                    // 右上角关闭按钮触发的回调：默认会自动触发关闭。如果不想关闭，return false即可
                    cancel: function (index, layero) {
                        jQuery("#menuLayer").hide();//隐藏
                    },

                });
            },
            reload: function () {
                vm.showList = true;
                Menu.table.refresh();
                jQuery("#menuLayer").hide();//隐藏
            },
            validator: function () {
                if (isBlank(vm.menu.name)) {
                    alert("菜单名称不能为空");
                    return true;
                }

                //菜单
                if (vm.menu.type === 1 && isBlank(vm.menu.url)) {
                    alert("菜单URL不能为空");
                    return true;
                }
            }
        }
    });


    var Menu = {
        id: "menuTable",
        table: null,
        layerIndex: -1
    };

    /**
     * 初始化表格的列
     */
    Menu.initColumn = function () {
        var columns = [
            {field: 'selectItem', radio: true},
            {title: '菜单ID', field: 'menuId', visible: false, align: 'center', valign: 'middle', width: '120px'},
            {title: '菜单名称', field: 'name', align: 'center', valign: 'middle', sortable: true, width: '140px'},
            {
                title: '上级菜单', field: 'parentName', align: 'center', valign: 'middle', sortable: true, width: '100px',
                formatter: function (item, index) {
                    return item.parentName == null ? '' : item.parentName;
                }
            },
            {
                title: '图标', field: 'icon', align: 'center', valign: 'middle', sortable: true, width: '80px',
                formatter: function (item, index) {
                    return item.icon == null ? '' : '<i class="' + item.icon + ' fa-lg"></i>';
                }
            },
            {
                title: '类型',
                field: 'type',
                align: 'center',
                valign: 'middle',
                sortable: true,
                width: '100px',
                formatter: function (item, index) {
                    if (item.type === 0) {
                        return '<span class="label label-primary">目录</span>';
                    }
                    if (item.type === 1) {
                        return '<span class="label label-success">菜单</span>';
                    }
                    if (item.type === 2) {
                        return '<span class="label label-warning">按钮</span>';
                    }
                }
            },
            {title: '排序号', field: 'orderNum', align: 'center', valign: 'middle', sortable: true, width: '100px'},
            {
                title: '菜单URL', field: 'url', align: 'center', valign: 'middle', sortable: true, width: '200px',
                formatter: function (item, index) {
                    return item.url == null ? '' : item.url;
                }
            },
            {
                title: '授权标识',
                field: 'perms',
                align: 'center',
                valign: 'middle',
                sortable: true,
                formatter: function (item, index) {
                    return item.perms == null ? '' : item.perms;
                }
            }]
        return columns;
    };


    function getMenuId() {
        var selected = $('#menuTable').bootstrapTreeTable('getSelections');
        if (selected.length == 0) {
            alert("请选择一条记录");
            return null;
        } else {
            return selected[0].id;
        }
    }


    $(function () {

        var colunms = Menu.initColumn();
        var table = new TreeTable(Menu.id, "/wedding_admin/sys/sysmenu/list", colunms);
        table.setExpandColumn(2);
        table.setIdField("menuId");
        table.setCodeField("menuId");
        table.setParentCodeField("parentId");
        table.setExpandAll(false);

        table.init();
        Menu.table = table;
    });


</script>
</body>
</html>
